<template>
  <div>
    <div>
      <div class="g-content pb-0">
        <x-form ref="formRef" v-model:model="form" inline label-placement="left">
          <x-button type="primary" style="margin-right: 10px" @click="handleEdit('add', {})">添加部门</x-button>
          <n-form-item label="部门名称">
            <n-input v-model:value="form.departmentName" placeholder="部门名称" clearable />
          </n-form-item>
          <x-button type="primary" @click="handleSubmit">查询</x-button>
          <x-button @click="handleRefresh">重置</x-button>
        </x-form>
      </div>
      <div class="g-content">
        <div>
          <n-data-table
            v-if="tableData && tableData.length > 0"
            :columns="columns"
            :data="tableData"
            :row-key="(row) => row.id"
            :children-key="childrenKey"
            :default-expand-all="true"
            :expandable="expandable"
          />
        </div>
      </div>
    </div>
    <DepartmentEdit v-if="modalAdd.show" :modal-data="modalAdd" @success="handleRefresh" />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, h, onMounted, reactive } from 'vue'
  import { XForm, XButton, XDataTable, XDiyColumnDraggable } from '@/components'
  import { NFormItem, NSelect, NInput, NSpace, NText, NPopconfirm, NDataTable, NTabs, NTabPane, NTag } from 'naive-ui'
  import { useRouter } from 'vue-router'
  import { useStore } from '@/store'
  import DepartmentEdit from '@/views/system/components/DepartmentEdit.vue'
  const router = useRouter()
  const store = useStore()
  const props = defineProps({})
  const getProps = reactive(props)
  const tableRef = ref(null)
  const formRef = ref(null)
  const form = ref({
    departmentName: null
  })
  const modalAdd = ref({
    show: false,
    row: null,
    type: 'add'
  })
  const childrenKey = ref('children')
  const expandable = (row: any) => !!row.children
  const immediate = ref(true)
  const tagType = (level: any) => {
    switch (level) {
      case 0:
        return 'primary'
      case 1:
        return 'success'
      case 2:
        return 'info'
      case 3:
        return 'warning'
      case 4:
        return 'error'
      default:
        return 'default'
    }
  }
  const columns = ref([
    {
      title: '部门名称',
      key: 'departmentName',
      render(row: any) {
        return h('span', {}, [
          h(NText, {}, () => row.departmentName),
          h(
            NTag,
            {
              type: tagType(row.departmentLevel),
              size: 'small',
              style: 'margin-left: 10px'
            },
            () => (row.departmentLevel === 0 ? '公司主体' : `${row.departmentLevel}级部门`)
          )
        ])
      }
    },
    {
      title: '部门人数',
      key: 'accountCount'
    },
    {
      title: '创建/更新时间',
      key: 'createdAt',
      render(row: any) {
        return h(NSpace, { vertical: true }, () => [h(NText, {}, () => row.creatorName || '系统')])
      }
    },
    {
      title: '操作',
      key: 'actions',
      render(row: any) {
        return h('div', [
          row.departmentLevel !== 0
            ? h(
                XButton,
                { type: 'primary', text: true, onClick: () => handleEdit('edit', row) },
                { default: () => '编辑' }
              )
            : null,
          row.departmentLevel !== 0
            ? h(
                NPopconfirm,
                { onPositiveClick: () => handleDelete(row) },
                {
                  default: () => '删除后不可恢复，请确认是否删除？',
                  trigger: () => h(XButton, { type: 'error', text: true }, { default: () => '删除' })
                }
              )
            : null,
          h(
            XButton,
            { type: 'primary', text: true, onClick: () => handleEdit('create', row) },
            { default: () => '添加子部门' }
          )
        ])
      }
    }
  ])

  const tableData = ref([])

  onMounted(() => {
    getDepartmentList()
  })

  const handleEdit = (type: string, row: any) => {
    modalAdd.value = {
      show: true,
      row: JSON.parse(JSON.stringify(row)),
      type
    }
  }
  const handleDelete = async (row: any) => {
    await store.dispatch('system/departmentDelete', { id: row.id }).then(() => {})
    immediate.value = true
  }

  const handleSubmit = () => {
    getDepartmentList()
  }
  const getDepartmentList = async () => {
    const { data } = await store.dispatch('system/departmentList', {
      ...form.value
    })
    if (data) {
      tableData.value = [data]
    } else {
      tableData.value = []
    }
  }
  const handleRefresh = () => {
    formRef.value.resetFields()
    handleSubmit()
  }
</script>

<style lang="scss" scoped></style>
